HTMLModelElement: play() method

None.

A Promise that is resolved when playback has been started, or is rejected if for any reason playback cannot be started.

This example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback:

const modelElem = document.getElementById("model");
const playButton = document.getElementById("play-button");

playButton.addEventListener("click", handlePlayButton, false);
playModelAnimation();

async function playModelAnimation() {
  try {
    await modelElem.play();
    playButton.classList.add("playing");
  } catch (err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (modelElem.paused) {
    playModelAnimation();
  } else {
    modelElem.pause();
    playButton.classList.remove("playing");
  }
}

In this example, playback of model is toggled off and on by the async playModelAnimation() function. It tries to play the model, and if successful sets the class name of the playButton element to "playing". If playback fails to start, the playButton element's class is cleared, restoring its default appearance. This ensures that the play button matches the actual state of playback by watching for the resolution or rejection of the Promise returned by play().

When this example is executed, it begins by collecting references to the <model> element as well as the <button> used to toggle playback on and off. It then sets up an event handler for the click event on the play toggle button and attempts to automatically begin playback by calling playModelAnimation().